<html>
  <head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
	  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	  <style type="text/css">
		#draggable { width: 100px; height: 70px; background: silver; }
	  </style>
	  <script>
	  $(document).ready(function() {
		$("#draggable").draggable({
            drag:function(e, ui) { onDrag(); }
        });
        onDrag(); // show initial position
        //var helper = $( "#draggable" ).draggable( "option", "helper" );
        
        //var console = $( "#console" );
        //console.innerTEXT += '<b>hello</b>' + '\n';
        //helper.position.top = 0;
        //helper.position.left = 0;
	  });

      function onDrag() {
        var console = document.getElementById("txtConsole");
        var draggable = document.getElementById("draggable");
        //console.value += "top: " + ui.position.top + "\n";
        //console.value += "left: " + ui.position.left + "\n";
        console.value = console + ", " + $( "#console" ) + '\n';
        console.value += "top: " + draggable.offsetTop + "\n";
        console.value += "left: " + draggable.offsetLeft + "\n";
      }
	  </script>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
          
          ctx.fillStyle = "rgb(200, 0, 0)";
          ctx.fillRect(0, 0, 55, 50);
          
          ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
          ctx.fillRect(30, 30, 55, 50);
          
          ctx.beginPath();
          ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
          ctx.moveTo(110,75);
          ctx.arc(75,75,35,0,Math.PI,false);   // Mouth (clockwise)
          ctx.moveTo(65,65);
          ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
          ctx.moveTo(95,65);
          ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
          ctx.stroke();
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
      #console { border: 1px solid gray; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="400" height="400"></canvas>
    <div id="draggable">Drag me</div>
    <div id="console" ><textarea id="txtConsole" editable="false"></textarea></div>
  </body>
</html>
